<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试验证码(修复版)</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-md bg-white rounded-xl shadow-lg p-6">
        <h1 class="text-2xl font-bold text-center mb-6">测试验证码API(修复版)</h1>
        
        <div class="mb-6">
            <img id="captcha-image" src="" alt="验证码" class="w-full h-24 object-cover border border-gray-300 rounded-lg">
        </div>
        
        <div class="mb-6">
            <input type="hidden" id="captcha-token">
            <div id="response-status" class="p-3 bg-gray-50 rounded-lg text-center"></div>
        </div>
        
        <button id="refresh-captcha" class="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-custom">
            <i class="fa fa-refresh mr-2"></i>刷新验证码
        </button>
    </div>

    <script>
        const captchaImage = document.getElementById('captcha-image');
        const captchaToken = document.getElementById('captcha-token');
        const refreshCaptchaButton = document.getElementById('refresh-captcha');
        const responseStatus = document.getElementById('response-status');

        // 获取验证码
        function fetchCaptcha() {
            responseStatus.textContent = '正在获取验证码...';
            responseStatus.className = 'p-3 bg-yellow-50 rounded-lg text-center';
            
            // 使用完整URL和时间戳防止缓存
            fetch('http://localhost:8000/api/auth/captcha?t=' + new Date().getTime())
                .then(response => {
                    console.log('Response status:', response.status);
                    console.log('Response headers:', response.headers);
                    
                    if (!response.ok) {
                        throw new Error(`HTTP错误! 状态码: ${response.status}`);
                    }
                    
                    // 检查Content-Type
                    const contentType = response.headers.get('content-type');
                    console.log('Content-Type:', contentType);
                    
                    if (contentType && contentType.includes('application/json')) {
                        return response.json();
                    } else {
                        // 如果不是JSON，尝试获取文本
                        return response.text().then(text => {
                            console.log('Response text:', text);
                            throw new Error('响应不是有效的JSON格式');
                        });
                    }
                })
                .then(data => {
                    console.log('Response data:', data);
                    
                    if (data.captchaImage) {
                        captchaImage.src = data.captchaImage;
                        if (data.captchaToken) {
                            captchaToken.value = data.captchaToken;
                        }
                        responseStatus.textContent = '验证码获取成功';
                        responseStatus.className = 'p-3 bg-green-50 rounded-lg text-center text-green-700';
                    } else {
                        throw new Error('响应数据中不包含captchaImage字段');
                    }
                })
                .catch(error => {
                    console.error('获取验证码失败:', error);
                    responseStatus.textContent = `获取验证码失败: ${error.message}`;
                    responseStatus.className = 'p-3 bg-red-50 rounded-lg text-center text-red-700';
                });
        }

        // 点击刷新验证码
        refreshCaptchaButton.addEventListener('click', fetchCaptcha);

        // 页面加载时获取验证码
        window.addEventListener('DOMContentLoaded', fetchCaptcha);
    </script>
</body>
</html>